<!DOCTYPE html>
<html>
  <head>
    <title>报名</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no" />
    <link rel='stylesheet' href='stylesheets/register.css' />
  </head>
  <body>
    <div class="container">
      <button class="Root"></button>
      <div class="userInfo">
        <input type="text" name="name" class="name" maxlength='15'>
        <input type="text" name="tel" class="tel" maxlength='15'>
        <input type="text" name="email" class="email" maxlength='30'>
        <input type="text" name="age" class="age" placeholder="6岁~12岁之间" maxlength='15'>
        <input type="text" name="sum" class="sum" maxlength='30'>
      </div>
      <div class="rootChoose">
        <input type="radio" name="place" value="日本" id="Japan" checked="checked">

        <label for="Japan" class="lab-place">
          <span class="radio-green radio-checked"></span>
          日本</label>
        <input type="radio" name="place" value="巴厘岛" id="Bali">

        <label for="Bali" class="lab-place">
            <span class="radio-green"></span>
            巴厘岛</label>
        <input type="radio" name="place" value="法国" id="France">

        <label for="France" class="lab-place">
            <span class="radio-green"></span>
            法国</label>
      </div>
      <button class="submitBtn"></button>
    </div>

    <div class="BgHidde"></div>
    <div class="rootIntro">
      <div class="bg">
        <img src="images/rootBg.png" alt="">
      </div>
      <span class="RIclose">
        <img src="images/RIclose.png" alt="">
      </span>
      <ul class="RIimg">
        <li class="JapanRoot">
          <img src="images/JapanRoot.png" alt="">
          <span>20人(以家庭为单位)欲购从速！</span>
        </li>
        <li class="BailRoot">
          <img src="images/BailRoot.png" alt="">
          <span>20人(以家庭为单位)欲购从速！</span>
        </li>
        <li class="FranceRoot">
          <img src="images/FranceRoot.png" alt="">
          <span>15人(以家庭为单位)欲购从速！</span>
        </li>
      </ul>
    </div>
    <div class="JapanInfo">
      <span class="RInfo JapanClose"></span>
      <div class="JapanTitle"></div>
      <div class="JapanContent"></div>
      <div class="startBtn JapanClose"></div>
    </div>
    <div class="BailInfo">
      <span class="RInfo BailClose"></span>
      <div class="BailTitle"></div>
      <div class="BailContent"></div>
      <div class="startBtn BailClose"></div>
    </div>
    <div class="FranceInfo">
      <span class="RInfo FranceClose"></span>
      <div class="FranceTitle"></div>
      <div class="FranceContent"></div>
      <div class="startBtn FranceClose"></div>
    </div>
  </body>
  <script type="text/javascript" src="javascripts/jquery-1.10.1.min.js"></script>
  <script type="text/javascript">
    $('input[type=radio]').on('click',function(){
      $(this).next('span').addClass('chShow').siblings('span').removeClass('chShow')
    });

    $('.submitBtn').on('click',function() {
      var name=$('.name').val();
      var tel=$('.tel').val();
      var email=$('.email').val();
      var age=$('.age').val();
      var sum=$('.sum').val();
      var place=$('input[name=place]:checked').val();
      // console.log(name);
      // console.log(place);
      if(name==null||name==''){
        alert('姓名不能为空');
        return 0;
      }
      if(tel==null||tel==''){
        alert('电话不能为空');
        return 0;
      }
      if(email==null||email==''){
        alert('邮箱不能为空');
        return 0;
      }
      if(age==null||age==''){
        alert('宝贝年龄不能为空');
        return 0;
      }
      if(sum==null||sum==''){
        alert('报名人数不能为空');
        return 0;
      }
      $.ajax({
        type:'post',
        url:'api/baseInfo',
        data:{
          name:name,
          tel:tel,
          email:email,
          age:age,
          sum:sum,
          place:place
        },
        dataType:'json',
        success:function (data) {
          console.log('you success!');
          window.location.href="success";
        }
      });
    });

    $('.Root').on('click',function() {
      $('.BgHidde').css('display','block');
      $('.rootIntro').css('display','block');
    });

    $('.RIclose').on('click',function() {
      $('.BgHidde').css('display','none');
      $('.rootIntro').css('display','none');
    })

    $('.JapanRoot').on('click',function() {
      $('.JapanInfo').css('display','block');
      $('.rootIntro').css('display','none');
    })
    $('.BailRoot').on('click',function() {
      $('.BailInfo').css('display','block');
      $('.rootIntro').css('display','none');
    })
    $('.FranceRoot').on('click',function() {
      $('.FranceInfo').css('display','block');
      $('.rootIntro').css('display','none');
    })

    $('.JapanClose').on('click',function() {
      $('.BgHidde').css('display','none');
      $('.JapanInfo').css('display','none');
    })
    $('.BailClose').on('click',function() {
      $('.BgHidde').css('display','none');
      $('.BailInfo').css('display','none');
    })
    $('.FranceClose').on('click',function() {
      $('.BgHidde').css('display','none');
      $('.FranceInfo').css('display','none');
    })

    $('.lab-place').click(function(){
      $('.radio-green').removeClass('radio-checked');
      $(this).children('span').addClass('radio-checked');
    });
  </script>
  <%include include_share.ejs %>
</html>
